<template>
	<view class="main bgfff">
		<gui-a-header title="补充信息"></gui-a-header>
		<view class="warp">
			<view class="card">
				<view class="title-img flex-ac">
					<image src="../../static/image/userInfo.png" mode="widthFix" style="height: auto;"></image>
					<text class="f28 gui-bold">公司信息</text>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						联系电话
					</view>
					<view class="val c333">
						<input class="val_input" type="text" @input="inputing" v-model="companyForm.phone"
							placeholder="请输入联系电话" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						联系人
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.contacts" placeholder="请输入联系人" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						公司名称
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.companyName" placeholder="请输入公司名称" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26 mt30">
					<view class="label c333">
						LOGO
					</view>
					<view class="val">
						<!-- <image class="tx_image" src="../../static/logo.png" mode="aspectFit"></image> -->
						<gui-upload-images :items="logoFileList" @change="changeTx" ref="uploadimgTx" :maxFileNumber="1"
							@uploaded="uploadedTx"
							:uploadServerUrl="`${baseURL}/common/uploadLocal`"></gui-upload-images>
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						企业行业
					</view>
					<!-- <picker @change="professionPickerChange" :value="professionIndex" :range="professionArr"
						range-key="dictLabel">
						<view class="val gui-flex gui-align-items-center c333">
							<view class="uni-input">{{professionArr[professionIndex].dictLabel}}</view>
							<text class="gui-icons c999">&#xe601;</text>
						</view>
					</picker> -->
					<view class="val c333 gui-flex1">
						<picker mode="multiSelector" @columnchange="professionPickerChange" :value="professionIndex"
							:range="professionArr" range-key="label">
							<view class="uni-input qoverDot" style="text-align: right;" v-if="professionArr[0][professionIndex[0]]">
								{{professionArr[0][professionIndex[0]].label}}，{{professionArr[1][professionIndex[1]].label}}
							</view>
						</picker>
					</view>
					
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						企业规模
					</view>
					<picker @change="personnelPickerChange" :value="personnelIndex" :range="personnelArr"
						range-key="dictLabel">
						<view class="val gui-flex gui-align-items-center c333" v-if="personnelArr[personnelIndex]">
							<view class="uni-input">{{personnelArr[personnelIndex].dictLabel}}</view>
							<text class="gui-icons c999">&#xe601;</text>
						</view>
					</picker>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						注册地址
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.registerAddress"
							placeholder="请输入注册地址" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26">
					<view class="label c333">
						工作地址
					</view>
					<view class="val c333">
						<input class="val_input" type="text" v-model="companyForm.workAddress" placeholder="请输入工作地址" />
					</view>
				</view>
				<view class="row gui-flex gui-space-between gui-align-items-center f26 mt30">
					<view class="label c333">
						营业执照
					</view>
					<view class="val">
						<!-- <image class="tx_image" src="../../static/logo.png" mode="aspectFit"></image> -->
						<gui-upload-images :items="companyImgFileList" @change="change" ref="uploadedZzRef"
							:maxFileNumber="1" @uploaded="uploadedZz"
							:uploadServerUrl="`${baseURL}/common/uploadLocal`"></gui-upload-images>
					</view>
				</view>
			</view>
			<view class="zw_10"></view>
			<view class="btn_warp gui-flex">
				<view class="saveBtn" @tap="realSumbit">
					确定
				</view>
			</view>
			<view class="zw100"></view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/config/app.js'
	import graceChecker from "@/Grace6/js/checker.js"
	const {
		baseURL
	} = config;
	import {
		ref,
		reactive,
		inject,
		watch
	} from 'vue'

	const $u = reactive(inject('$u'))

	import {
		useUserStore
	} from '@/stores/user.js'

	const store = useUserStore()

	import {
		getUserSelectPhone,
		upSysDictTypeInfo
	} from '@/api/company.js';

	import {
		getSysDictTypeList,
		selectOneGradeList
	} from '@/api/config.js';
	const isClick = ref(true);
	const companyForm = ref({})
	const logoFileList = ref([]);
	const companyImgFileList = ref([]);
	// 是否上传完成了
	const uploadFilePross = ref([true, true])

	const professionData = ref([]);
	const professionArr = ref([
		[{
			value: 0,
			label: '请选择'
		}],
		[{
			value: 1,
			label: '请选择'
		}]
	])
	const professionIndex = ref([0, 0])
	const professionPickerChange = (e) => {
		console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
		professionIndex.value[e.detail.column] = e.detail.value
		switch (e.detail.column) {
			case 0: //拖动第1列
				let childList = professionData.value[e.detail.value].listGrade.map(e => {
					return {
						value: e.id,
						label: e.twoName
					}
				})
				professionArr.value[1] = childList;
				professionIndex.value.splice(1, 1, 0)
				companyForm.value.industry = professionArr.value[1][0].label;
				companyForm.value.industryId = professionArr.value[1][0].value;
				break
			case 1: //拖动第1列
				companyForm.value.industryId = professionArr.value[1][e.detail.value].value;
				companyForm.value.industry = professionArr.value[1][e.detail.value].label;
				break
		}
	}

	const personnelArr = ref([])
	const personnelIndex = ref(0)
	const personnelPickerChange = (e) => {
		personnelIndex.value = e.detail.value;
		companyForm.value.personnel = personnelArr.value[e.detail.value].dictValue
	}

	const setUpTimeConfirm = (res) => {
		companyForm.value.creTime = res[0] + '-' + res[1] + '-' + res[2];
	}


	const uploadimgTx = ref(null);
	// logo上传
	const changeTx = (e) => {
		let list = e.filter((item) => {
			return item.progress == 0
		})
		if (list.length > 0) {
			uploadFilePross.value[0] = false;
		}
	}
	const uploadedTx = (uploadedImgs) => {
		companyForm.value.logo = uploadedImgs[0].url;
		uploadFilePross.value[0] = true;
		realSumbit();
	}

	// 记录选择图片时的待提交数据
	const uploadedZzRef = ref(null)
	const change = (e) => {
		let list = e.filter((item) => {
			return item.progress == 0
		})

		if (list.length > 0) {
			uploadFilePross.value[1] = false;
		}
	}
	// 图片上传完毕执行 uploaded 函数
	const uploadedZz = (uploadedImgs) => {
		companyForm.value.companyImg = uploadedImgs[0].url;
		uploadFilePross.value[1] = true;
		realSumbit();
	}

	const loadZd = () => {
		selectOneGradeList().then(res => {
			professionData.value = res.data;
			console.log(professionData.value);
			let list = res.data.map(e => {
				return {
					value: e.id,
					label: e.oneName
				}
			})
			let childList = professionData.value[0].listGrade.map(e => {
				return {
					value: e.id,
					label: e.twoName
				}
			})
			professionArr.value[0] = list;
			professionArr.value[1] = childList;
			getSysDictTypeList({
				dictType: ''
			}).then(res => {
				let result = res.data;
				/* professionArr.value = []; */
				personnelArr.value = [];
				result.forEach(item => {
					// 行业
					// if (item.dictType == 'com_industry') {
					// 	professionArr.value.push(item)
					// }
					// 人员
					if (item.dictType == 'com_num_user') {
						personnelArr.value.push(item)
					}
				})
			})
		})
	}
	loadZd();


	const loadDataByPhone = () => {
		let form = Object.assign(companyForm.value, {})
		getUserSelectPhone({
			phone: form.phone
		}).then(res => {
			if (res.code == 200) {
				if (res.data) {
					const {
						id,
						phone,
						contacts,
						companyName,
						logo,
						industry,
						personnel,
						registerAddress,
						workAddress,
						companyImg
					} = res.data;
					companyForm.value = {
						id,
						phone,
						contacts,
						companyName,
						logo,
						// industry,
						personnel,
						registerAddress,
						workAddress,
						companyImg
					}
					// professionArr.value.forEach((item, index) => {
					// 	if (item.dictValue == industry) professionIndex.value = index;
					// })
					personnelArr.value.forEach((item, index) => {
						if (item.dictValue == personnel) personnelIndex.value = index;
					})
				}
			}
		})
	}
	const inputing = (e) => {
		//定义表单规则
		let rule = [{
			name: 'phone',
			checkType: 'phoneno',
			errorMsg: '手机号格式有误'
		}];
		let checkRes = graceChecker.check(companyForm.value, rule);
		if (checkRes) {
			$u.debounce(() => {
				loadDataByPhone();
			}, 1000)
		}
	}

	const realSumbit = () => {
		console.log("进来了=============");
		console.log(uploadFilePross.value[0])
		if (!uploadFilePross.value[0]) {
			uploadimgTx.value.upload();
			return;
		}
		if (!uploadFilePross.value[1]) {
			uploadedZzRef.value.upload();
			return;
		}
		//定义表单规则
		let rule = [{
			name: 'phone',
			checkType: 'phoneno',
			errorMsg: '联系电话格式有误'
		}, {
			name: 'contacts',
			checkType: 'notnull',
			errorMsg: '请输入联系人'
		}, {
			name: 'companyName',
			checkType: 'notnull',
			errorMsg: '请输入公司名称'
		}, {
			name: 'logo',
			checkType: 'notnull',
			errorMsg: '请上传logo'
		}, {
			name: 'registerAddress',
			checkType: 'notnull',
			errorMsg: '请输入注册地址'
		}, {
			name: 'workAddress',
			checkType: 'notnull',
			errorMsg: '请输入工作地址'
		}, {
			name: 'companyImg',
			checkType: 'notnull',
			errorMsg: '请上传营业执照'
		}];
		let checkRes = graceChecker.check(companyForm.value, rule);
		if (checkRes) {
			if (isClick.value) {
				isClick.value = false;
			} else {
				return;
			}
			let form = Object.assign(companyForm.value, {})
			upSysDictTypeInfo(form).then((res) => {
				if (res.code == 200) {
					if (form.id) {
						$u.msg('注册成功');
					} else {
						$u.msg('注册成功，请耐心等待审核');
					}
					setTimeout(async () => {
						let result = await store.getUserFun();
						if (result.code == 200) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}, 1000)
				}
			}).finally(() => {
				isClick.value = true;
			})
		} else {
			$u.msg(graceChecker.error);
		}
	}
</script>

<style lang="scss">
	.warp {
		box-sizing: border-box;
	}

	.card {
		box-sizing: border-box;
		padding: 20rpx 64rpx 0rpx 40rpx;

		.tool {
			position: relative;
			right: -40rpx;

			.bai-icons {
				color: #167C3A;
			}
		}
	}

	.title-img {
		padding: 20rpx 0;
	}

	.tx_image {
		width: 115rpx;
		height: 115rpx;
	}

	.row {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #EBEBEB;
	}

	.val_input {
		text-align: right;
	}

	.zw_10 {
		width: 100%;
		height: 10rpx;
		background: #f8f9fd;
	}

	.btn_warp {
		width: 750rpx;
		height: 96rpx;
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
	}

	.saveBtn {
		width: 654rpx;
	}

	.zw100 {
		height: 100rpx;
	}
</style>